import React from 'react';
import ReactDOM from 'react-dom';

export default class ComponentBody extends React.Component{
	constructor(){
		super();
		this.state={
			userName:"张三"
		}
	}
	handelStyle(){
		this.setState({
			userName:"李四"
		})
		// 第一种方式  不推荐
		/*
		var button = document.getElementById('btn');
		console.log(button);
		ReactDOM.findDOMNode(button).style.color = "red";
		*/

		// 第二种方式  推荐使用  但是不要滥用
		// refs 是访问到组件内部DOM节点唯一可靠的方法
		// refs  会自动销毁对子组件的引用
		// refs 不要在render或render 之前调用  因为dom节点没有加载完
		console.log(this.refs.btn);
		this.refs.btn.style.color = 'red';
	}
	render(){
		return(
			<div>
				<div>{this.state.userName}</div>
				<button id="btn" ref="btn" onClick={this.handelStyle.bind(this)}>按钮</button>
			</div>
		)
	}
}